<template>
  <div>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script lang="ts" setup>
import { createApp, ref, onMounted, watch } from 'vue'
import { AddressEdit, showToast } from 'vant'
import router from '@/router'
// import { useAddress } from '@/stores/addRess'
// const addressStore = useAddress()

// onMounted(() => {
//   addressStore.loadFromLocalStorage()
// })

const searchResult = ref([])
const areaList = ref({
  province_list: {
    '110000': '北京市',
    '120000': '天津市',
    // 其他省份数据...
  },
  city_list: {
    '110100': '北京市市辖区',
    '110200': '北京市县',
    // 其他城市数据...
  },
  county_list: {
    '110101': '东城区',
    '110102': '西城区',
    // 其他区县数据...
  },
})

// 保存
const onSave = (content: any) => {
  try {
    showToast('保存成功')
    // 保存到本地
    localStorage.setItem('address', JSON.stringify(content))
    router.go(-1)
    // addressStore.setAddressData(content)
  } catch (error) {
    console.error('保存失败:', error)
  }
}

// 删除
const onDelete = () => {
  try {
    showToast('删除成功')
    // addressStore.setAddressData(null)
  } catch (error) {
    console.error('删除失败:', error)
  }
}

const updateSearchResult = (val: boolean) => {
  searchResult.value = val
    ? [
        {
          name: '黄龙万科中心',
          address: '杭州市西湖区',
        },
      ]
    : []
}

const onChangeDetail = (val: any) => {
  if (typeof val === 'boolean') {
    updateSearchResult(val)
  } else {
    console.warn('Invalid value type for onChangeDetail:', val)
  }
}
</script>

<style scoped lang="less">
</style>